var config = {
    content: [
        {
            type: 'column',
            content: [
                {
                    type: 'row',
                    height: 70,
                    content: [{
                        type: 'component',
                        width: 20,
                        componentName: 'HierarchyPanel'
                    }, {
                        type: 'component',
                        width: 40,
                        componentName: 'GamePanel'
                    }, {
                        type: 'component',
                        width: 20,
                        componentName: 'InspectorPanel'
                    }]
                },
                {
                    type: 'row',
                    height: 30,
                    content: [
                        {
                            type: 'component',
                            componentName: 'ResourcePanel'
                        }
                    ]
                }
            ]
        }
    ]
};



var myLayout = new GoldenLayout(config);
myLayout.registerComponent('HierarchyPanel', function (container, componentState) {
    container.getElement().html(`<div id="hierarchyPanel"></div>`);
});
myLayout.registerComponent('GamePanel', function (container, componentState) {
    container.getElement().html(`<div id="gamePanel"></div>`);
});
myLayout.registerComponent('InspectorPanel', function (container, componentState) {
    container.getElement().html(`<div id="inspectorPanel"></div>`);
});
myLayout.registerComponent('ResourcePanel', function (container, componentState) {
    container.getElement().html(`<div id="resourcePanel"></div>`);
});
myLayout.init();




setTimeout(async () => {
    function loadText(url: string) {
        return new Promise<string>((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.onload = () => {
                resolve(xhr.responseText);
            }
            xhr.open('get', url);
            xhr.send();
        })
    }

    const gamePanel = document.getElementById('gamePanel');
    const button = document.createElement("button");
    button.innerText = "运行";
    gamePanel.appendChild(button);
    button.onclick = () => {
        const BrowserWindow = require('electron').remote.BrowserWindow;
        const win = new BrowserWindow({
            width: 1800,
            height: 1000
        })
        win.on('close', () => {

        })
        win.loadFile("index.html")
        win.webContents.openDevTools()
    }
    const canvas = document.createElement('canvas');
    canvas.id = 'game';
    canvas.width = 1200;
    canvas.height = 675;
    gamePanel.appendChild(canvas);


    // const content = await loadText('./data/scripts.json');
    // const javaScriptFiles = JSON.parse(content);
    const content = await loadText('./data/config.json');
    window['configData'] = JSON.parse(content)
    const javascriptFiles = window['configData'].scripts;

    for (let item of javascriptFiles) {
        await loadScript(item);
    }

    const editorJavaScriptFiles = [
        "./libs/dat.gui/dat.gui.min.js",
        "./out/engine/editor-api.js",
        "./out/engine/editor-ui.js"
    ]

    for (let item of editorJavaScriptFiles) {
        await loadScript(item);
    }


}, 1000)


function loadScript(url: string) {
    return new Promise((resolve, reject) => {
        const script = document.createElement("script");
        script.onload = () => resolve();
        script.src = url;
        document.body.appendChild(script)

    })
}